<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctx}/static/admin/layui/css/layui.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-card-body">
    <form class="layui-form layui-form-pane">
        <div id="checktransfer" class="demo-transfer"></div>
        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <button id="submit-btn" class="layui-btn" lay-submit >立即提交</button>
                <button id="reset-btn" type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="${ctx}/static/admin/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['transfer', 'layer', 'form'], function(){
        var $ = layui.$
            ,transfer = layui.transfer
            ,layer = layui.layer
            ,form = layui.form;

        var searchable;
        $.ajax({
            type: "POST",
            url: '${ctx}/sys_admin/modules/getSearchList',
            data: {'moduleid':'${moduleid}'},
            async:false,
            success: function(data){
                for (var i = 0; i <data.length ; i++) {
                    if(data[i].type=="file"){
                        data.splice(i);
                    }
                }
                searchable = data;
            }
        });
        var searched;
        $.ajax({
            type: "POST",
            url: '${ctx}/sys_admin/modules/getSearchedList',
            data: {'moduleid':'${moduleid}'},
            async:false,
            success: function(data){
                searched = data;
            }
        });

        //定义标题及数据源
        transfer.render({
            elem: '#checktransfer',
            title: ['候选字段', '已选字段'],  //自定义标题
            showSearch: true,
            data: searchable,
            value: searched,
            width: 300, //定义宽度
            //height: 210, //定义高度
            id: 'checktransferid'
            /*onchange: function(obj, index){
                var arr = ['左边', '右边'];
                layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据
            }*/
        })

        form.on('submit', function(data){
            var getData = transfer.getData('checktransferid');
            $.post('${ctx}/sys_admin/modules/saveColumnsSearch', {'moduleid':'${moduleid}', 'data':JSON.stringify(getData)}, function(result) {
                if (result.success) {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                } else {
                    layer.msg(result.msg);
                }
            }, 'json');
            return false;
        });

    });
</script>

</body>
</html>